React Suspense: Een uitgebreide gids voor data ophalen en code splitsen

React Suspense is een krachtige functie die is geïntroduceerd in React 16.6 en waarmee u het renderen van componenten kunt "onderbreken" terwijl u op iets wacht, zoals het laden van gegevens of het downloaden van code. Dit biedt een declaratieve manier om laadstatussen te beheren en de gebruikerservaring te verbeteren door asynchrone bewerkingen elegant af te handelen. Deze gids leidt u door de concepten van Suspense, de use-cases en praktische voorbeelden van hoe u het in uw React-applicaties kunt implementeren.

Wat is React Suspense?

Suspense is een React-component die andere componenten omwikkelt en waarmee u een fallback UI (bijv. een laadspinner) kunt weergeven terwijl die componenten wachten tot een promise is opgelost. Deze promise kan betrekking hebben op:

• Data ophalen: Wachten tot data is opgehaald van een API.
• Code splitsen: Wachten tot JavaScript-modules zijn gedownload en geparseerd.

Vóór Suspense omvatte het beheren van laadstatussen vaak complexe conditionele rendering en handmatige afhandeling van asynchrone bewerkingen. Suspense vereenvoudigt dit door een declaratieve aanpak te bieden, waardoor uw code schoner en beter onderhoudbaar wordt.

Belangrijkste concepten

• Suspense Component: De <Suspense> component zelf. Het accepteert een fallback prop, die de UI specificeert die moet worden weergegeven terwijl de omwikkelde componenten worden onderbroken.
• React.lazy(): Een functie die code splitsen mogelijk maakt door componenten dynamisch te importeren. Het retourneert een Promise die wordt opgelost wanneer de component is geladen.
• Promise Integratie: Suspense integreert naadloos met Promises. Wanneer een component probeert gegevens te renderen van een Promise die nog niet is opgelost, wordt deze "onderbroken" en wordt de fallback UI weergegeven.

Use-cases

1. Data ophalen met Suspense

Een van de belangrijkste use-cases voor Suspense is het beheren van data ophalen. In plaats van laadstatussen handmatig te beheren met conditionele rendering, kunt u Suspense gebruiken om declaratief een laadindicator weer te geven terwijl u wacht tot data arriveert.

Voorbeeld: Gebruikersdata ophalen van een API

Stel dat u een component hebt die gebruikersdata weergeeft die is opgehaald van een API. Zonder Suspense hebt u mogelijk code zoals deze:

import React, { useState, useEffect } from 'react';

function UserProfile() {
  const [user, setUser] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch('https://api.example.com/users/123');
        const data = await response.json();
        setUser(data);
      } catch (err) {
        setError(err);
      } finally {
        setIsLoading(false);
      }
    }

    fetchData();
  }, []);

  if (isLoading) {
    return <p>Loading user data...</p>;
  }

  if (error) {
    return <p>Error: {error.message}</p>;
  }

  if (!user) {
    return <p>No user data available.</p>;
  }

  return (
    <div>
      <h2>{user.name}</h2>
      <p>Email: {user.email}</p>
    </div>
  );
}

export default UserProfile;

Deze code werkt, maar het omvat het beheren van meerdere state-variabelen (isLoading, error, user) en conditionele renderinglogica. Met Suspense kunt u dit vereenvoudigen met behulp van een bibliotheek voor data ophalen zoals SWR of TanStack Query (voorheen React Query) die zijn ontworpen om naadloos te werken met Suspense.

Hier is hoe u SWR met Suspense zou kunnen gebruiken:

import React from 'react';
import useSWR from 'swr';

// A simple fetcher function
const fetcher = (...args) => fetch(...args).then(res => res.json());

function UserProfile() {
  const { data: user, error } = useSWR('/api/users/123', fetcher, { suspense: true });

  if (error) {
    return <p>Error: {error.message}</p>;
  }

  return (
    <div>
      <h2>{user.name}</h2>
      <p>Email: {user.email}</p>
    </div>
  );
}

function App() {
  return (
    <Suspense fallback={<p>Loading user data...</p>}>
      <UserProfile />
    </Suspense>
  );
}

export default App;

In dit voorbeeld:

• We gebruiken useSWR om de gebruikersdata op te halen. De optie suspense: true vertelt SWR om een Promise te gooien als de data nog niet beschikbaar is.
• De UserProfile component hoeft laad- of foutstatussen niet expliciet te beheren. Het rendert eenvoudigweg de gebruikersdata wanneer deze beschikbaar is.
• De <Suspense> component vangt de Promise op die door SWR wordt gegooid en geeft de fallback UI weer (<p>Loading user data...</p>) terwijl de data wordt opgehaald.

Deze aanpak vereenvoudigt uw componentlogica en maakt het gemakkelijker om na te denken over data ophalen.

Globale overwegingen voor data ophalen:

Houd bij het bouwen van applicaties voor een wereldwijd publiek rekening met het volgende:

• Netwerklatentie: Gebruikers op verschillende geografische locaties kunnen verschillende netwerklatentie ervaren. Suspense kan helpen om een betere gebruikerservaring te bieden door laadindicatoren weer te geven terwijl gegevens worden opgehaald van verre servers. Overweeg het gebruik van een Content Delivery Network (CDN) om uw gegevens dichter bij uw gebruikers in de cache op te slaan.
• Data Lokalisatie: Zorg ervoor dat uw API data lokalisatie ondersteunt, zodat u data kunt leveren in de voorkeurstaal en -indeling van de gebruiker.
• API Beschikbaarheid: Bewaak de beschikbaarheid en prestaties van uw API's vanuit verschillende regio's om een consistente gebruikerservaring te garanderen.

2. Code splitsen met React.lazy() en Suspense

Code splitsen is een techniek om uw applicatie op te delen in kleinere brokken, die op aanvraag kunnen worden geladen. Dit kan de initiële laadtijd van uw applicatie aanzienlijk verbeteren, vooral voor grote en complexe projecten.

React biedt de React.lazy() functie voor het splitsen van code componenten. Wanneer gebruikt met Suspense, kunt u een fallback UI weergeven terwijl u wacht tot de component is gedownload en geparseerd.

Voorbeeld: Lazy loading van een component

import React, { Suspense, lazy } from 'react';

const OtherComponent = lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    <div>
      <Suspense fallback={<p>Loading...</p>}>
        <OtherComponent />
      </Suspense>
    </div>
  );
}

export default MyComponent;

In dit voorbeeld:

• We gebruiken React.lazy() om de OtherComponent dynamisch te importeren. Dit retourneert een Promise die wordt opgelost wanneer de component is geladen.
• We wikkelen de <OtherComponent /> met <Suspense> en geven een fallback prop.
• Terwijl de OtherComponent wordt geladen, wordt de fallback UI (<p>Loading...</p>) weergegeven. Zodra de component is geladen, vervangt deze de fallback UI.

Voordelen van Code Splitsen:

• Verbeterde initiële laadtijd: Door alleen de benodigde code voor de initiële weergave te laden, kunt u de tijd verkorten die nodig is voordat uw applicatie interactief wordt.
• Verminderde bundelgrootte: Code splitsen kan helpen de algehele grootte van de JavaScript-bundel van uw applicatie te verkleinen, wat de prestaties kan verbeteren, vooral bij verbindingen met een lage bandbreedte.
• Betere gebruikerservaring: Door een snellere initiële lading te bieden en alleen code te laden wanneer dat nodig is, kunt u een soepelere en responsievere gebruikerservaring creëren.

Geavanceerde Code Splitsen Technieken:

• Route-gebaseerde Code Splitsen: Splits uw applicatie op basis van routes, zodat elke route alleen de code laadt die hij nodig heeft. Dit kan eenvoudig worden bereikt met bibliotheken zoals React Router.
• Component-gebaseerde Code Splitsen: Splits afzonderlijke componenten in afzonderlijke brokken, vooral voor grote of zelden gebruikte componenten.
• Dynamische Imports: Gebruik dynamische imports binnen uw componenten om code op aanvraag te laden op basis van gebruikersinteracties of andere omstandigheden.

3. Concurrent Mode en Suspense

Suspense is een belangrijk ingrediënt voor React's Concurrent Mode, een reeks nieuwe functies waarmee React gelijktijdig aan meerdere taken kan werken. Concurrent Mode stelt React in staat om belangrijke updates te prioriteren, langdurige taken te onderbreken en de responsiviteit van uw applicatie te verbeteren.

Met Concurrent Mode en Suspense kan React:

• Beginnen met het renderen van componenten voordat alle data beschikbaar is: React kan beginnen met het renderen van een component, zelfs als sommige van zijn data afhankelijkheden nog worden opgehaald. Hierdoor kan React eerder een gedeeltelijke UI weergeven, waardoor de waargenomen prestaties van uw applicatie worden verbeterd.
• Onderbreken en hervatten van rendering: Als er een update met een hogere prioriteit binnenkomt terwijl React een component rendert, kan het het renderingproces onderbreken, de update met de hogere prioriteit afhandelen en later de component opnieuw renderen.
• Vermijd het blokkeren van de hoofdthread: Concurrent Mode stelt React in staat om langdurige taken uit te voeren zonder de hoofdthread te blokkeren, wat kan voorkomen dat de UI niet meer reageert.

Om Concurrent Mode in te schakelen, kunt u de createRoot API in React 18 gebruiken:

import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';

const container = document.getElementById('root');
const root = createRoot(container); // Create a root.
root.render(<App />);

Best practices voor het gebruik van Suspense

• Gebruik een bibliotheek voor data ophalen: Overweeg het gebruik van een bibliotheek voor data ophalen zoals SWR of TanStack Query, die zijn ontworpen om naadloos te werken met Suspense. Deze bibliotheken bieden functies zoals caching, automatische pogingen en foutafhandeling, die uw data ophaallogica kunnen vereenvoudigen.
• Bied zinvolle fallback UI: De fallback UI moet een duidelijke indicatie geven dat er iets wordt geladen. Gebruik spinners, voortgangsbalken of skeleton loaders om een visueel aantrekkelijke en informatieve laadervaring te creëren.
• Fouten elegant afhandelen: Gebruik Error Boundaries om fouten op te vangen die optreden tijdens het renderen. Dit kan voorkomen dat uw hele applicatie crasht en een betere gebruikerservaring bieden.
• Optimaliseer Code Splitsen: Gebruik code splitsen strategisch om de initiële laadtijd van uw applicatie te verkorten. Identificeer grote of zelden gebruikte componenten en splits ze in afzonderlijke brokken.
• Test uw Suspense Implementatie: Test uw Suspense implementatie grondig om ervoor te zorgen dat deze correct werkt en dat uw applicatie laadstatussen en fouten elegant afhandelt.

Foutafhandeling met Error Boundaries

Terwijl Suspense de *laad* status afhandelt, handelen Error Boundaries de *fout* status af tijdens het renderen. Error Boundaries zijn React-componenten die JavaScript-fouten opvangen waar dan ook in hun child-componentboom, die fouten loggen en een fallback UI weergeven in plaats van de hele componentboom te laten crashen.

Hier is een basisvoorbeeld van een Error Boundary:

import React, { Component } from 'react';

class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // You can also log the error to an error reporting service
    console.error(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children;
  }
}

export default ErrorBoundary;

Om de Error Boundary te gebruiken, wikkelt u deze rond de component die mogelijk een fout gooit:

import ErrorBoundary from './ErrorBoundary';
import MyComponent from './MyComponent';

function App() {
  return (
    <ErrorBoundary>
      <MyComponent />
    </ErrorBoundary>
  );
}

export default App;

Door Suspense en Error Boundaries te combineren, kunt u een robuuste en veerkrachtige applicatie maken die zowel laadstatussen als fouten elegant afhandelt.

Real-World voorbeelden

Hier zijn een paar real-world voorbeelden van hoe Suspense kan worden gebruikt om de gebruikerservaring te verbeteren:

• E-commerce Website: Gebruik Suspense om laadindicatoren weer te geven tijdens het ophalen van productdetails of afbeeldingen. Dit kan voorkomen dat de gebruiker een lege pagina ziet terwijl hij wacht tot de data is geladen.
• Social Media Platform: Gebruik Suspense om opmerkingen of berichten lazy te laden terwijl de gebruiker over de pagina scrolt. Dit kan de initiële laadtijd van de pagina verbeteren en de hoeveelheid data die moet worden gedownload verminderen.
• Dashboard Applicatie: Gebruik Suspense om laadindicatoren weer te geven tijdens het ophalen van data voor grafieken of diagrammen. Dit kan een soepelere en responsievere gebruikerservaring bieden.

Voorbeeld: Internationaal E-commerce Platform

Overweeg een internationaal e-commerceplatform dat producten wereldwijd verkoopt. Het platform kan Suspense en React.lazy() gebruiken om:

• Lazy Load Productafbeeldingen: Gebruik React.lazy() om productafbeeldingen alleen te laden wanneer ze zichtbaar zijn in de viewport. Dit kan de initiële laadtijd van de product listing pagina aanzienlijk verkorten. Wikkel elke lazy-loaded afbeelding met <Suspense fallback={<img src="placeholder.png" alt="Loading..." />}> om een placeholder afbeelding weer te geven terwijl de daadwerkelijke afbeelding wordt geladen.
• Code Split Land-Specifieke Componenten: Als het platform land-specifieke componenten heeft (bijv. valuta-opmaak, adresinvoervelden), gebruik dan React.lazy() om deze componenten alleen te laden wanneer de gebruiker een specifiek land selecteert.
• Ophalen van Gelokaliseerde Productbeschrijvingen: Gebruik een bibliotheek voor data ophalen zoals SWR met Suspense om productbeschrijvingen op te halen in de voorkeurstaal van de gebruiker. Geef een laadindicator weer terwijl de gelokaliseerde beschrijvingen worden opgehaald.

Conclusie

React Suspense is een krachtige functie die de gebruikerservaring van uw React-applicaties aanzienlijk kan verbeteren. Door een declaratieve manier te bieden om laadstatussen en code splitsen te beheren, vereenvoudigt Suspense uw code en maakt het gemakkelijker om na te denken over asynchrone bewerkingen. Of u nu een klein persoonlijk project of een grote enterprise-applicatie bouwt, Suspense kan u helpen een soepelere, responsievere en beter presterende gebruikerservaring te creëren.

Door Suspense te integreren met bibliotheken voor data ophalen en code splitsen technieken, kunt u het volledige potentieel van React's Concurrent Mode ontsluiten en echt moderne en boeiende webapplicaties creëren. Omarm Suspense en til uw React-ontwikkeling naar een hoger niveau.

Verder leren

• React Suspense Documentatie
• SWR Documentatie
• TanStack Query Documentatie
• React 18 Aankondiging (Concurrent Mode)